<template>
  <div class="column confirm_block">
    <div class="tickets_show_ul" v-show="haveSelected">
      <div class="scroll_title">已选座位</div>
      <div class="scroll_block" ref="scroll_block">
        <ul class="scroll_ul row" ref="scroll_ul">
          <li class="scroll_li" @click="deleteSeat(item)" v-for="(item, index) in selectedSeat" :key="index">{{item.pai}}排{{item.zuo}}座 {{item.jia}}元</li>
        </ul>
      </div>
    </div>
    <div class="confirm_buy row_s">
      <div class="seat_sure">
          <div class="total_p">
              <span>{{allPrice}}</span>元
          </div>
          <div class="f_line"></div>
          <div class="ticket_z">{{seatNum}}张</div>
          <van-icon name="arrow-up" size="0.26rem"/>
      </div>
      <div class="sure_btn" @click="sure_seat">确认选座</div>
    </div>
  </div>
</template>

<script>
import { Icon } from 'vant'
import BScroll from 'better-scroll'
export default {
  name: 'ConfirmBuy',
  components: {
    [Icon.name]: Icon
  },
  props: {
    propSelectedSeat: Array
  },
  data () {
    return {
      selectedSeat: this.propSelectedSeat,
      allPrice: 0,
      seatNum: 0,
      haveSelected: false
    }
  },
  watch: {
    propSelectedSeat: function (newVal, oldVal) {
      this.selectedSeat = newVal
      if (this.selectedSeat.length >= 1) {
        this.haveSelected = true
      } else {
        this.haveSelected = false
      }
      this.allPrice = 0
      this.seatNum = this.selectedSeat.length
      this.selectedSeat.forEach(element => {
        this.allPrice += parseInt(element.jia)
      })
      let width = this.selectedSeat.length * 2.4 + 1.2
      this.$refs.scroll_ul.style.width = width + 'rem'
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.scroll_block, {
            scrollX: true,
            scrollY: false,
            eventPassthrough: 'vertical'
          })
        } else {
          this.scroll.refresh()
        }
      })
    }
  },
  methods: {
    sure_seat () {
      // console.log(this.selectedSeat)
      localStorage.setItem('seatLists', JSON.stringify(this.selectedSeat))
      this.$router.push({
        name: 'TicketsBuy'
      })
    },
    deleteSeat (i) {
      // console.log(this.selectedSeat.length)
      // if (this.selectedSeat.length == 1) {
      //   this.haveSelected = false
      // }
      this.$emit('delete', i)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.confirm_block{
  width: 10rem;
  position: fixed;
  bottom: 0;
  left: 50%;
  margin-left: -5rem;
  .tickets_show_ul{
    width:10rem;
    height: 1.3rem;
    padding: 0.2rem;
    .scroll_title{
      font-size: 0.27rem;
    }
    .scroll_block{
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      .scroll_ul{
        margin-top: 0.76rem;
        .scroll_li{
          margin-left:0.1rem;
          height: 0.65rem;
          line-height: 0.65rem;
          text-align: center;
          width:2.4rem;
          color:#888888;
          border:0.02rem solid #888888;
          border-radius: 0.1rem;
          font-size: 0.26rem
        }
      }
    }
  }
  .confirm_buy{
  width: 10rem;
  height: 1.2rem;
  border-top: 0.013333rem solid #E9E9E9;
    .seat_sure{
        width: 6.533333rem;
        height: 1.186667rem;
        display: flex;
        align-items: center;
        .total_p{
            color: #989898;
            font-size: 0.266667rem;
            display: flex;
            align-items: center;
            margin-left: 0.266667rem;
            letter-spacing: 0.026667rem;
            span{
                color: #FFB43D;
                font-size: 0.4rem;
                letter-spacing: 0.013333rem;
            }
        }
        .f_line{
            width: 0.026667rem;
            height: 0.226667rem;
            background-color: #D8D8D8;
            margin: 0 0.15rem;
        }
        .ticket_z{
            color: #989898;
            font-size: 0.266667rem;
            line-height: 0.24rem;
            letter-spacing: 0.013333rem;
            margin-right: 0.26rem;
        }
    }
    .sure_btn{
        width: 3.466667rem;
        line-height: 1.2rem;
        text-align: center;
        font-size: 0.453333rem;
        letter-spacing: 0.04rem;
        font-weight: bold;
        background-color: #d8ad6d;
    }
  }
}
</style>
